<template>
	<!-- sss -->
    <view class="slide-main" :style="{opacity:isShow?1:0}">
        <view class="conterLIstA">
			<view class="conterInfo">{{frList.show_name}}</view>
		</view>
		<!--  -->
		<view class="" style="padding: 0 24rpx;">
			<scroll-view
				 :style="{height:scrollHeight}"
				 scroll-y="true"
				  @scrolltoupper="loadHistory"
				 :scroll-top="scrollTop"
			>
				<view>
					<view class="" v-for="(item,index) in frList.list">
						<view v-if="index==0" style="padding-bottom: 24rpx;"></view>
						<view>
							<view v-if="item.type==0">
								<chatList :my_data="my_data"  :type="item.msg.type" :list_id="list_id" :mes="item" :mesTime="timestampFormat(item.msg.time+'')+'  '+frList.show_name" :conter="item.msg.content.text"></chatList>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			
		</view>
		<view class="footerConter">
			<view class="baogangtaiConter">
				<!-- <view @click="goPages('/pages/exposure/list')" class="baogangtaiList active">曝光台</view>
				<view class="baogangtaiList" @click="getGroupData">群公告</view> -->
				<!-- <view class="baogangtaiList">担保交易</view> -->
			</view>
			<view class="coLisae">
				<input type="text" placeholder="请输入" class="coLisaeInput" />
				<view class="">
					
				</view>
			</view>
		</view>
		<!-- <view>
			<button open-type="getUserInfo" @getuserinfo="getUserInfo">微信登录</button>
		</view> -->
		<!-- cancel -->
		<logonIs v-if="!token"></logonIs>
		<!-- ischatting=false,chatData -->
		<chatting :show_name="[list_id]"  @selectChange="selectChange" @textMsgOK="textMsgOK" v-if="ischatting"   @cancel="ischatting=false" :chatListvListInfo="chatListvListInfo"></chatting>
		<Notice v-if="isConteList" :conter="gongaConter" @cancel="cancelNotice"></Notice>
    </view>
</template>
<!-- /im/in/getAuthLogin -->
<script>
	
	import {
		Request
	} from '@/utils/request.js';
		import chatList from "../../components/chatList/index.vue"
		import Notice from "../../components/Notice/index.vue"
		import chatting from "../../components/chatting/index.vue"
		import ldSelect from '@/components/UI/ld-select/ld-select.vue'
		import logonIs from "../../components/logon_is.vue"
		import _action from '../../common/_action';
		import _getUserInfo from '../../common/_getUserInfo';
		import _get from '../../common/_get';
		import _data from '../../common/_data';
		
		
    export default {
        data() {
           return {
			   uid:"",
			   list_id:"",
			   show_name:'',
			   frList:{
				   list:[],
			   },
			   token:uni.getStorageSync('token'),
			   my_data:{},
			   chatListvListInfo:[],
			   isShow:false,
			   isConteList:false,
			   ischatting:false,
			   //
			   scrollTop:0,
				scrollHeight:"0px",
				scrollInfo:{
					
				},
				gongaConter:'',
				
		   }
        },
		components:{
			chatList,
			Notice,
			logonIs,
			chatting,
			ldSelect
		},
		onLoad({uid}) {
			this.uid=uid;
			console.log(uid)
		},
		
		onShow() {
				this.token=uni.getStorageSync('token');
				let userInfo=uni.getStorageSync("userInfo");
				this.getListId();
				if(userInfo){
					this.my_data = JSON.parse(userInfo);
				}
				let _this=this;
				if(this.token && !userInfo){
					_get.base((data)=>{
						this.my_data = data;
						// uni.setStorageSync("userInfo",JSON.stringify(data))
					});
				}
				
				// this.setGroupData()
		},
		computed:{
			getlist_id () {
			  return [this.list_id]
			},
			// []
		},
        methods: {
			// https://im.numtwin.com/im/message/getListId
			getListId(){
				Request('im/message/getListId',{
					user_id:this.uid,
				},"post").then(({list_id})=>{
					this.list_id=list_id;
					this.info();
				})
			},
			// message/getGroupData
			// Request
			getGroupData(){
				Request('im/message/getGroupData',{
					list_id:this.list_id,
					type:'notice',
				},"post").then((data)=>{
					this.gongaConter=data;
					this.isConteList=true;
				})
			},
			loadHistory () {
				console.log('sssss','ssss')
			  if (this.isHistoryLoading || this.noMore) {
			    return;
			  }
			  let _this = this;
			  this.isHistoryLoading = true; //参数作为进入请求标识，防止重复请求
			  this.chatData(_this.frList.list[0].msg.time);
			  return false;
			  _get.getChatData({
			    send_data: {
			      list_id: _this.list_id,
			      time:_this.frList.list[0].msg.time,
			      is_up: 0,
			    },
			    callback (data) {
			      if (data.list.length < 15) {
			        _this.noMore = 1;
			      }
			      _this.isHistoryLoading = false;
			    },
			    is_action_data: 0,
			  });
			},
			// im/message/updataNoReader
			// 更新未读消息
			updataReader(){
				Request('im/message/updataNoReader',{
					list_id:this.list_id,
				},'post').then((res)=>{
					
				})
			},
			// 切换 群聊
			selectChange(e,key){
				this.list_id=e;
				this.bindGroup(e);
				this.chatListvListInfo.map((item)=>{
					if(item.list_id==e){
						this.show_name=item.show_name;
					}
				})
				if(e){
					setTimeout(()=>{
						this.info();
					})
				}
				
			},
			// 
			// /im/user/bindGroup
			bindGroup(list_id){
				// bindGroup
				// im/message/addChat
				Request('im/message/addChat',{
					list_id:list_id,
				},'post').then((res)=>{
					Request('im/user/bindGroup',{
						list_id:list_id,
					},'post').then((res)=>{
						this.updataReader();
					}).catch((e)=>{
						// this.token='';
					})
				}).catch((e)=>{
					// this.token='';
				})
				
			},
			textMsgOK(){
				this.ischatting=false;
				setTimeout(()=>{
					this.chatData();
				})
			},
			info(){
					let chat_data = _data.localData(this.list_id);
					this.chatData();
					let _this=this;
					setTimeout(()=>{
						this.getScrollContentHeight('init',false);
					})
			},
			// setGroupData(){
			// 	// chatList
			// 	Request('im/message/setGroupData',{
			// 		list_id:this.list_id,
			// 		time: 0,
			// 		is_up: '1',
			// 	},'post').then((res)=>{
			// 		res.list = this.msgDataHandle(res.list);
			// 		this.frList=res;
			// 	}).catch((e)=>{
			// 		this.token='';
			// 	})
			// },
			cancelNotice(){
				this.isConteList=false;
			},
			goPages(path){
				uni.navigateTo({
					url:path
				})
			},
			getScrollContentHeight(type = 'show',not_return = 1){
			  let _this = this;
			  let query = uni.createSelectorQuery();
			      query.select('.conterLIstA').boundingClientRect();
			      query.select('.footerConter').boundingClientRect();
			     uni.getSystemInfo({
			        success:function (res) {
			          // _this.scrollInfo.totall_height = res.windowHeight;
			          query.exec(data => {
			   //          _this.scrollInfo.input_box_height1  = data[0].height || 0;
						// _this.scrollInfo.input_box_height1  = data[0].height || 0;
			            // _this.scrollInfo.input_box_height2  = data[1].height || 0;
						if(!not_return){
							_this.scrollHeight=(res.windowHeight-data[0].height-data[1].height)+'px';
							_this.$nextTick(function () {
							  setTimeout(()=>{
								  _this.isShow=true;
								  _this.scrollTop =(new Date()).getTime();
							  },500)
							});
						}
			            // _this.autoHeight(type,not_return)
			          })
			        }
			     })
			},
			// conterLIstA
			// /im/get/chatList
			timestampFormat (time) {
			  return _action.timestampFormat(time);
			},
			setPicSize (content) {
			  // 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
			  let maxW = uni.upx2px(350);//350是定义消息图片最大宽度
			  let maxH = uni.upx2px(350);//350是定义消息图片最大高度
			  if (content.w > maxW || content.h > maxH) {
			    let scale = content.w / content.h;
			    content.w = scale > 1 ? maxW : maxH * scale;
			    content.h = scale > 1 ? maxW / scale : maxH;
			    let url_array = content.url.split('.');
			    if (content.url.indexOf('_thumb.') == -1) {
			      content.url = url_array[0] + '_thumb.' + url_array[1];
			    }
			  }
			  return content;
			},
			chatData(time){
				let _this=this;
				Request('im/get/chatData',{
					list_id:this.list_id,
					time:time||0,
					is_up: '1',
				},'post').then((res)=>{
					if (res.list.length < 15) {
					  this.noMore = 1;
					}
					res.list = this.msgDataHandle(res.list);
					console.log(res)
					this.frList={
						...res,
						list:[...res.list,...this.frList.list]
					};
					 this.isHistoryLoading = false;
				}).catch((e)=>{
					console.log(e)
					// _this.token='';
				})
			},
			msgDataHandle (data, type) {
			  for (let i = 0, j = data.length, msg_img; i < j; i++) {
			    if (data[i].type == 0 && data[i].msg.type == 2) {
			      msg_img = this.staticPath + data[i].msg.content.url.replace('_thumb.', '.');
			      // if (type) {
			      //   this.msgImgList.unshift(msg_img);
			      // } else {
			      //   this.msgImgList.push(msg_img);
			      // }
			      data[i].msg.content = this.setPicSize(data[i].msg.content);
			    } 
			  }
			  return data;
			},
			//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
			setPicSize (content) {
			  // 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
			  let maxW = uni.upx2px(350);//350是定义消息图片最大宽度
			  let maxH = uni.upx2px(350);//350是定义消息图片最大高度
			  if (content.w > maxW || content.h > maxH) {
			    let scale = content.w / content.h;
			    content.w = scale > 1 ? maxW : maxH * scale;
			    content.h = scale > 1 ? maxW / scale : maxH;
			    let url_array = content.url.split('.');
			    if (content.url.indexOf('_thumb.') == -1) {
			      content.url = url_array[0] + '_thumb.' + url_array[1];
			    }
			  }
			  return content;
			},
			// chatList(){
			// 	// chatList
			// 	Request('im/get/chatListv2').then((res)=>{
			// 		this.bindGroup(res[0].list_id)
			// 		this.list_id=res[0].list_id;
			// 		this.show_name=res[0].show_name;
			// 		this.chatListvListInfo=res;
			// 		this.info();
			// 	}).catch(()=>{
			// 		this.isShow=true;
			// 	})
			// },

            //点击操作回调事件
            clickItem(e) {
                console.log('所点击的列表索引：' + e.index)
                console.log('所点击的按钮id：' + e.id)
            }
        }
    }
</script>

<style scoped>
	.conteTitle{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #9298A0;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-bottom: 32rpx;
		padding-top: 20rpx;
	}
	.footerConter{
		width: 750rpx;
		height: 270rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -10rpx 10rpx 1rpx rgba(0,0,0,0.04);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		padding-bottom: 68rpx;
	}
	.baogangtaiConter{
		display: flex;
		align-items: center;
		padding-top: 34rpx;
		margin-bottom: 16rpx;
	}
	
	.baogangtaiList{
		width: 166rpx;
		text-align: center;
		line-height: 56rpx;
		height: 56rpx;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		border: 1rpx solid #C4CAD4;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #9298A0;
		text-align: center;
		margin-right: 16rpx;
		font-style: normal;
		text-transform: none;
	}
	.coLisaeInput{
		width: 514rpx;
		height: 80rpx;
		background: #F2F4F7;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #616974;
		line-height: 36rpx;
		padding-left: 24rpx;
		box-sizing: border-box;
		line-height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}
	.coLisae{
		display: flex;
		justify-content: space-between;
	}
	.baogangtaiList.active{
		background: #F8E9E9;
		color: #DD6262;
		border: 1px solid #F8E9E9;
	}
    .slide-main {
        width: 100%;
        height: 100vh;
		overflow: hidden;
    }
	.conterLIstA{
		padding-top: 90rpx;
		background-color: #236AE5;
	}
	.sixian{
		width: 164rpx;
		height: 80rpx;
		background: #E8F0FF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #256FF3;
		text-align: center;
		line-height: 80rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		position: relative;
	}
	.sixian .conLis{
		width: 46rpx;
		height: 36rpx;
		position: absolute;
		font-family: SF UI Display, SF UI Display;
		font-weight: 500;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		right: -23rpx;
		top: -18rpx;
		background: #DD6262;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
	}
	.conterInfo{
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
		text-align: center;
		line-height: 90rpx;
		box-sizing: border-box;
		padding-left: 25rpx;
	}
	.zongqUnstitle{
		width: 750rpx;
		height: 114rpx;display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		box-sizing: border-box;
		background: linear-gradient( 180deg, #D3E1FF 0%, #FFFFFF 100%);
		border-radius: 32rpx 32rpx 0px 0px;
		border: 1px solid #DCE1E8;
	}
   
</style>